<template>
	<div class="system-dic-container layout-padding">
		<!-- 使用Suspense组件处理异步加载 -->
		<Suspense>
			<template #default>
				<component :is="currentComponent" />
			</template>
			<template #fallback>
				<div>加载中...</div>
			</template>
		</Suspense>
		<!-- 错误提示 -->
		<div v-if="loadError" class="error-message">
			加载组件失败: {{ loadError.message }}
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, onErrorCaptured } from 'vue'
import { useUserInfo } from '/@/stores/userInfo';
import { storeToRefs } from 'pinia';

const stores = useUserInfo();
const { userInfos } = storeToRefs(stores);

// 定义组件导入函数
const proxyView = () => import('./proxy.vue');
const adminView = () => import('./admin.vue');

const currentComponent = ref(null);
const loadError = ref(null);

// 捕获组件加载错误
onErrorCaptured((err) => {
	loadError.value = err;
	// 阻止错误向上传播
	return true;
});

// 判断权限并加载对应组件
const loadComponentByPermission = async () => {
	try {
		const adminAuth = [0, 2];
		const hasPermission = adminAuth.includes(userInfos.value.auth_id);
		
		currentComponent.value = hasPermission ? (await adminView()).default : (await proxyView()).default;
	} catch (err) {
		console.error('加载组件失败:', err);
		loadError.value = err;
	}
};

onMounted(() => {
	loadComponentByPermission();
});
</script>

<style scoped>
.error-message {
	color: red;
	margin-top: 10px;
}
</style>